<template>
	<view class="con">
		<view class="tips">
			Hello! <br />
			欢迎来到流光数字
		</view>

		<view class="login">
			<view class="tab" @click="tabCurrent=!tabCurrent">
				<view class="item" :class="!tabCurrent?'active':''">账号登录</view>
				<view class="item" :class="tabCurrent?'active':''">注册账号</view>
			</view>
			<view class="form">
				<view class="">
					<u--input placeholder="账号" border="none" v-model="username"></u--input>
				</view>

				<view class="mt30 df" style="background: #F7FAFC;border-radius: 8px;">
					<!--  :type="isPassword?'password':'text'" -->
					<u-input v-show="isPassword" placeholder="密码" border="none" type="password" v-model="password"></u-input>
					<u-input v-show="!isPassword" placeholder="密码" border="none"  v-model="password"></u-input>
					<view style="padding: 10px 5px;" @click="isPassword=!isPassword">
						<u-icon :name="isPassword?'eye-off':'eye-fill'" size="26" ></u-icon>
					</view>
				</view>

				<view class="btn" @click="submit">
					登录
				</view>

				<view class="agree dfx">
					<u-checkbox-group v-model="checked">
						<u-checkbox :name="true"></u-checkbox>
					</u-checkbox-group>
					登录注册即同意
					<navigator :url="protocolPath" class="path" hover-class="navigator-hover">《用户协议》</navigator>
					<navigator :url="policyPath" class="path" hover-class="navigator-hover">《隐私协议》</navigator>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				tabCurrent: false,
				isPassword: true,
				checked: [],
				username: '',
				password: '',
				protocolPath: '/pages/webview/webview?title=协议&url=http://110.42.213.36:8786/static/%E7%94%A8%E6%88%B7%E5%8D%8F%E8%AE%AE.html',
				policyPath: '/pages/webview/webview?title=协议&url=http://110.42.213.36:8786/static/%E7%94%A8%E6%88%B7%E5%8D%8F%E8%AE%AE.html',
			};
		},
		onLoad() {
			if (uni.getStorageSync('token')) {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			}
		},
		methods: {
			submit() {
				console.log(this.username, this.password);
				if (!this.username) {
					this.$tools.toast('请输入账号')
					return;
				}
				if (!this.password) {
					this.$tools.toast('请输入密码')
					return;
				}
				if (!this.checked.length) {
					this.$tools.toast('请勾选用户协议')
					return;
				}

				let param = {
					username: this.username,
					password: this.password
				}
				this.$api.login(param).then(res => {
					if (res.code == 200) {
						this.$tools.toast('登录成功,欢迎回来!');
						uni.setStorageSync('token', res.data.token)
						this.$tn.vuex('vuex_token', res.data.token);

						this.$api.userInfo(param).then(info => {
							// console.log(info,123);
							if (info.code == 200) {
								this.$tn.vuex('vuex_userInfo', info.data);
								uni.setStorageSync('userInfo', JSON.stringify((info.data)))
								setTimeout(() => {
									uni.reLaunch({
										url: '/pages/index/index'
									})
								}, 500)
							} else {
								this.$tools.toast(res.msg);
							}
						})

					} else {
						this.$tools.toast(res.msg);
					}
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		margin: 0;
		padding: 0;
		height: 100%;
		width: 100%;
	}

	::v-deep {
		uni-input {
			height: 50px !important;
			padding-left: 15px;
			background: #F7FAFC;
			border-radius: 8px;
		}
	}

	.con {
		box-sizing: border-box;
		// width: 100vw;
		height: 100vh;
		background: url('@/static/img/login.png') no-repeat;
		background-size: cover;
		padding: 30rpx;
		padding-top: 240rpx;

		.tips {
			color: rgb(56, 56, 56);
			font-family: 阿里妈妈数黑体;
			font-size: 50rpx;
			font-weight: 700;
			margin-left: 15px;
		}

		.login {
			margin-top: 70rpx;
			border-radius: 30rpx;

			.form {
				background: #fff;
				padding: 40px 36rpx 10px;
				text-align: center;

				.btn {
					margin: 42px auto 27vh;
					border-radius: 16rpx;
					padding: 30rpx 33vw;
					background: #146fff;
					color: #fff;
				}

				.agree {
					font-size: 28rpx;
					justify-content: center;
				}
			}
		}

		.tab {
			display: flex;
			width: 100%;
			align-items: flex-end;
		}

		.tab .item {
			flex: 1;
			height: 80rpx;
			background: #f4f9ff;
			color: #9e9e9e;
			border-radius: 10rpx 10rpx 0 0;
			position: relative;
			list-style: none;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.tab .item.active {
			height: 90rpx;
			background: #fff;
			color: #3E81FD;
		}

		.tab .item:first-child:before {
			content: '';
			display: none;
			width: 20rpx;
			height: 100%;
			background: #fff;
			color: #3E81FD;
			position: absolute;
			right: -10rpx;
			top: 0;
			z-index: 10;
			border-radius: 0 10rpx 0 0;
			transform: skew(10deg);
		}

		.tab .item:first-child.active:before {
			display: block;
		}

		.tab .item:last-child:before {
			content: '';
			display: none;
			width: 20rpx;
			height: 100%;
			background: #fff;
			color: #3E81FD;
			position: absolute;
			left: -10rpx;
			top: 0;
			z-index: 10;
			border-radius: 10rpx 0 0 0;
			transform: skew(-10deg);
		}

		.tab .item:last-child.active:before {
			display: block;
		}
	}
</style>